<template>
  <div>
    <a-menu
      theme="dark"
      mode="inline"
      :selectedKeys="[current]"
      @click="handleClick"
    >
      <!-- 多级菜单 -->
      <template v-for="(item, index) in menus">
        <a-sub-menu v-if="item.children" :key="item.path">
          <template #title>
            <a-icon :type="item.icon ? item.icon : 'down-square'" />
            <span>{{ item.name }}</span>
          </template>
          <a-menu-item v-for="it in item.children" :key="it.path">
            <router-link :to="it.path" tag="div">
              <a-icon :type="it.icon ? it.icon : 'down-square'" />
              <span>{{ it.name }}</span>
            </router-link>
          </a-menu-item>
        </a-sub-menu>
        <!-- 一级菜单 -->
        <template v-else>
          <a-menu-item :key="index">
            <router-link :to="item.path" tag="div">
              <a-icon :type="item.icon ? item.icon : 'down-square'" />
              <span>{{ item.name }}</span>
            </router-link>
          </a-menu-item>
        </template>
      </template>
    </a-menu>
  </div>
</template>

<script>
export default {
  props: ["menus"],
  data() {
    return {
      current: "/",
    };
  },
  created() {},
  methods: {
    handleClick(e) {
      this.current = e.key;
    },
  },
};
</script>
